
<div class="modal hide fade" id="sendMessageModal">
	<div class="modal-header">
		<button type="button" class="close" data-dismiss="modal">×</button>
		<h3>
			<g:message code="user.send.message" />
		</h3>
	</div>

	<div class="modal-body">

		<g:form id="sendMessageForm" name="sendMessageForm" controller="user"
			action="sendMessage">

			<g:hiddenField id="to_user_id" name="to_user_id" value="${user?.id}" />

			<div class="form-horizontal">
				<div
					class="control-group">
					<label class="control-label" for="subject"><g:message
							code="user.message.subjet" /></label>
					<div class="controls">
						<g:field id="subject" class="input-xlarge messageSubject" type="text"
							name="subject" maxlength="30"
							placeholder="${message(code: 'user.message.subjet')}" />
					</div>
				</div>
				
				<div
					class="control-group">
					<label class="control-label" for="message"><g:message
							code="user.message" /></label>
					<div class="controls">
						<g:textArea onkeyup="textCounter(this,'counter',350);" class="messageArea" id="message" name="message" rows="3" maxlength="350"
							placeholder="${message(code: 'user.message')}"></g:textArea>
							
						<p id="counter" class="messageCharactersRemaining">350</p>
					</div>
				</div>

			</div>
		</g:form>

	</div>

	<div class="modal-footer">
		<button class="btn btn-success" form="sendMessageForm">
			<g:message code="send" />
		</button>
		
		<button class="btn" data-dismiss="modal" aria-hidden="true">${message(code : 'cancel')}</button>
	</div>

	<script type="text/javascript">
		$(document).ready(function() {
		});
		
		function textCounter(message, counter, maxlimit) {
			var countfield = $("#" + counter);
		 	if ( message.value.length > maxlimit ) {
		  		message.value = field.value.substring( 0, maxlimit );
		  		return false;
		 	} else {
		  		countfield.html(maxlimit - message.value.length);
		 	}
		}
	</script>
</div>